<template>
  <ul :class="{'top-container': true,'online': true,'one': data === 1,'two': data === 2,'three': data === 3,'four': data === 4}">
    <li v-for="(item, index) in 5" :key="index"/>
  </ul>
</template>

<script>
export default {
  name: 'TopMenu',
  props: {
    data: {
      type: Number,
      default: function() {
        return 0
      }
    }
  },
  data() {
    return {
    }
  },
  created() {
    console.log(this.data)
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.top-container{
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 28px;
  height: 18px;
  transform: rotateX(180deg);
  margin: 0;
  margin-right: 4px;
  padding: 0;
  li{
    width: 4px;
    margin-right: 2px;
    float: left;
    height: 18px;
    background-color: #E72106;
  }
  li:nth-child(1){
    height: 4px;
  }
  li:nth-child(2){
    height: 7px;
  }
  li:nth-child(3){
    height: 10px;
  }
  li:nth-child(4){
    height: 13px;
  }
  li:last-child{
    margin: 0;
  }
}
.online li{
  background-color: #0295FF;
}
.top-container.one{
  li:nth-child(2){
    background-color: #DBDBDB;
  }
  li:nth-child(3){
    background-color: #DBDBDB;
  }
  li:nth-child(4){
    background-color: #DBDBDB;
  }
  li:nth-child(5){
    background-color: #DBDBDB;
  }
}

.top-container.two{
  li:nth-child(3){
    background-color: #DBDBDB;
  }
  li:nth-child(4){
    background-color: #DBDBDB;
  }
  li:nth-child(5){
    background-color: #DBDBDB;
  }
}

.top-container.three{
  li:nth-child(4){
    background-color: #DBDBDB;
  }
  li:nth-child(5){
    background-color: #DBDBDB;
  }
}
.top-container.four{
  li:nth-child(5){
    background-color: #DBDBDB;
  }
}
</style>
